/**
 *  我们发现，在列表页面，都是要用到 搜索 ， 表格 ， 分页
 *  代表着，多个页面有部分逻辑是重复的
 *  可以封装出来，可以复用
 *
 *  如何封装？
 *      1. 分析哪些是重复的，哪些是需要变化的
 *      2. 分析封装的代码对外提供什么
 *
 *
 *      分析：
 *          1. 重复的是逻辑
 *          2. 变化的是 请求的接口,搜索的参数
 *          3. 对外提供什么？{ 多个数据 }
 */

import { reactive, ref, toRefs } from "vue";

/**
 * 封装的 表格快速使用 的hook
 * @param fn 要向服务器请求的api函数
 * @param searchParams 做搜索的参数
 * @returns
 */

type paginationParams = {
  pageNum: number;
  pageSize: number;
};

export default function useTable<
  T extends { list: any[]; total: number },
  P extends paginationParams = paginationParams
>(fn: (params: P) => RES<T>, searchParams?: Object) {
  // 固定的部分  ， 分页的参数
  const params = reactive<paginationParams>({
    pageNum: 1,
    pageSize: 10,
  });

  const list = ref<T["list"]>([]);
  const total = ref(0);

  const fetch = () => {
    fn({ ...(params as P), ...searchParams }).then((res) => {
      if (res.code === 200) {
        // 保存数组
        list.value = res.data.list;
        // 保存总数
        total.value = res.data.total;
      }
    });
  };
  fetch();
  //   准备几个不同的函数，让外面在不同的情况下调用
  const pageChangeHandle = () => {
    // 如果还想实现别的逻辑，可以继续扩展
    fetch();
  };
  const pageSizeChangeHandle = () => {
    // 如果还想实现别的逻辑，可以继续扩展
    fetch();
  };
  const searchHandle = () => {
    // 如果还想实现别的逻辑，可以继续扩展
    fetch();
  };

  return {
    list,
    ...toRefs(params),
    total,
    pageChangeHandle,
    pageSizeChangeHandle,
    searchHandle,
    fetch,
  };
}
